.post-pagination {
  overflow: hidden;
  width: 100%;
  margin: 3rem 0;
  background: #000;
  display: flex;

  & .pagination-container {
    position: relative;
    flex: 1;
    height: 10rem;

    & a {
      display: inline-block;
      height: 100%;
      width: 100%;
    }

    & img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0.4;
      transition: opacity 0.15s ease-out;
      &:hover {
        opacity: 0.6;
      }
    }

    & .label,
    & .info {
      position: absolute;
      font-size: 0.875rem;
    }

    & .label {
      top: 2.5em;
      display: block;
      text-transform: uppercase;
      color: rgba(255, 255, 255, 0.7);
    }

    & .info {
      bottom: 2.5em;

      & h3 {
        font-size: 1rem;
        font-weight: 400;
        line-height: 2rem;
        margin: 2em 0;
        color: #fff;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
  }

  & .previous {
    & .label,
    & .info {
      left: 2.5em;
    }
  }

  & .next {
    & .label,
    & .info {
      right: 2.5em;
    }
  }

  @mixin screens-md {
    flex-direction: column;

    & .pagination-container {
      flex: auto;
    }
  }
}
